<template>
  <view v-if="shenheStatus == 0" class="page">
    <view class="item">
      <template v-if="data">
        <view class="itemHead">
          <view class="info">
            <template v-if="data.worker">
              <image
                mode="aspectFill"
                :src="data.worker.logo"
                lazy-load
              ></image>
              <view>{{ data.worker.level_name }}：{{ data.worker.name }}</view>
            </template>
          </view>
          <view class="rig" @click="handle('mobile', data.worker.tel)"
            >打电话</view
          >
        </view>
      </template>

      <view class="data" v-if="data.progress && data.progress.length">
        <u-time-line>
          <u-time-line-item
            nodeTop="2"
            v-for="(item, i) of data.progress"
            :key="i"
          >
            <template v-slot:node>
              <view :class="['hdicon', i ? '' : 'on']">
                <view></view>
              </view>
            </template>
            <template v-slot:content>
              <view :class="[i ? '' : 'on']">
                <view class="u-order-title">
                  <view class="tit"> {{ getProgressStatus(item.status) }}</view>
                  <view class="time">{{ item.time }}</view>
                </view>
                <view class="u-order-desc">{{ item.msg }}</view>
              </view>
            </template>
          </u-time-line-item>
        </u-time-line>
      </view>

      <view class="itemAddress" v-if="data.address">
        <view class="hd">
          <view class="icon"><i class="iconfont icon-seat"></i></view>
          <view class="name">{{ data.address.name }}</view>
          <view class="mobile">{{ data.address.mobile }}</view>
        </view>

        <view class="address"> 地址：{{ data.address.address }} </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import { orderProgress } from "@/api/marketing/callOut";
import { progressStatus } from "../static/order";

export default {
  components: {
    Shenhe,
  },

  computed: {
    getProgressStatus() {
      return (status) => {
        return progressStatus[status] ? progressStatus[status].name : "";
      };
    },
  },

  data() {
    return {
      data: null,
      id: undefined,
    };
  },

  onLoad(opi) {
    this.id = opi.id;
    this.clearData();
  },

  methods: {
    handle(type, params) {
      switch (type) {
        case "mobile":
          this.$utils.makePhoneCall(params);
          break;

        default:
          break;
      }
    },

    async clearData() {
      try {
        let { id } = this;
        const res = await orderProgress({
          id,
        });
        uni.stopPullDownRefresh();
        if (res.code == 0) {
          this.data = res.data;
        }
      } catch (error) {
        this.$utils.toast(error);
      }
    },
  },

  onPullDownRefresh() {
    this.clearData();
  },
};
</script>

<style lang="scss">
.page {
  padding: 24rpx;
  min-height: 100vh;
  background: #f2f2f2;
  overflow: hidden;
}

.itemHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 30rpx;
  font-size: 30rpx;

  .rig {
    color: #f0250e;
  }
}

.info {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
  margin-right: 10rpx;
  padding: 30rpx 0;
  border-bottom: 1px solid #f8f8f8;

  image {
    margin-right: 10rpx;
    width: 40rpx;
    height: 40rpx;
    border-radius: 32px;
    background: #f2f2f2;
  }

  view {
    flex: 1;
    overflow: hidden;
    font-weight: bold;
    color: #262626;
  }
}

.data {
  // padding: 24rpx;
  border-bottom: 1px solid #f8f8f8;
}

.item {
  padding: 0 24rpx;
  background: #fff;
  border-radius: 20rpx;
}

.itemAddress {
  padding: 30rpx 0;
  .hd {
    display: flex;
    align-items: center;
    padding-bottom: 16rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #262626;

    .iconfont {
      font-size: 40rpx;
    }

    .name {
      padding: 0 22rpx 0 6rpx;
    }
  }

  .address {
    font-size: 24rpx;
    color: #8c8c8c;
  }
}

.u-node {
  width: 44rpx;
  height: 44rpx;
  border-radius: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d0d0d0;
}

.u-order-title {
  display: flex;
  align-items: flex-end;
  color: #333333;
  font-weight: bold;
  font-size: 32rpx;
}

.u-order-desc {
  color: rgb(150, 150, 150);
  font-size: 28rpx;
  margin-bottom: 6rpx;
}

.time {
  margin-left: 8rpx;
  font-size: 28rpx;
  font-weight: normal;
}

.on {
  .u-order-title,
  .u-order-desc {
    color: #f0250e;
  }
}

.hdicon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10rpx;
  width: 22rpx;
  height: 22rpx;
  border-radius: 32px;
  background: #b6b6b6;

  view {
    width: 10rpx;
    height: 10rpx;
    border-radius: 32px;
    background: #fff;
  }

  &.on {
    background: #f0250e;

    view {
      opacity: 0;
    }
  }
}
</style>
